<template>
  <van-tabbar v-model="active">
    <van-tabbar-item to="/goods" icon="home-o">外卖</van-tabbar-item>
    <van-tabbar-item to="/search" icon="search">搜索</van-tabbar-item>
    <van-tabbar-item to="/order" icon="orders-o">订单</van-tabbar-item>
    <van-tabbar-item to="/mine" icon="friends-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data () {
    return {
      active: 0
    }
  },
  watch: {
    $route: {
      handler: function (val) {
        const { path } = val
        if (path === '/goodsList') {
          this.active = 0
        } else if (path === '/search') {
          this.active = 1
        } else if (path === '/order') {
          this.active = 2
        } else if (path === '/mine') {
          this.active = 3
        }
        // console.log(path)
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped></style>
